<div ms-controller="comment" id="page_comment" ms-visible="nowPage=='comment'">

    <style>
        #page_comment header {
            background-color: #383431;
            position: fixed;
            top: 0;
            width: 100%;
            height: 45px;
            color: white;
            text-align: center;
        }

        #page_comment header > b {
            display: block;
            margin-top: 10px;
        }

        #page_comment #step1 .hImg {
            margin: 10px 0 0 0;
            padding-bottom: 60px;
            width: 100%;
            height: 150px;
            background: url(imgs/img_paysuccess.png) no-repeat center;
            background-size: 50%;
            border-bottom: solid 1px #e2e2e2;
        }

        #page_comment .wbox {
            padding: 15px 0 50px 0;
            width: 100%;
            background-color: white;
            text-align: center;
        }

        #page_comment #step1 .tip {
            width: 100%;
            text-align: center;
            color: #797979;
        }

        #page_comment .avatar {
            border: solid 1px #b3b3b3;
            width: 70px;
            height: 70px;
            margin: 20px 0 0 0;
        }

        #page_comment .starAr {
            margin-top: 20px;
            width: 100%;
        }

        #page_comment .starAr > span {
            vertical-align: top;
        }

        #page_comment .star {
            display: inline-block;
            margin: 0 3px 0 3px;
            width: 20px;
            height: 20px;
            background: url("imgs/star_dark.png") no-repeat;
            background-size: contain;
        }

        #page_comment .star.light {
            background-image: url("imgs/star_light.png");
        }

        #page_comment textarea {
            width: calc(100% - 50px);
            padding: 5px;
            resize: none;
            height: 100px;
            margin: 20px auto 0 auto;
            background-color: #f3f3f3;
            border: solid 1px #d8d8d8;
            border-radius: 4px;
        }

        #page_comment .btn-normal {
            border-radius: 999px;
            border: solid 2px #ffbb77;
            background-color: transparent;
            color: #1a1a1a;
            text-align: center;
            margin: 40px 20px;
            padding: 10px;
            width: calc(100% - 64px);
        }

        #page_comment .btn-normal:active {
            border: solid 2px #ffbb77;
            background-color: #ffbb77;
            color: white;
        }

        #page_comment #step2 .hImg {
            margin: 10px 20px 0 20px;
            padding-bottom: 60px;
            width: calc(100% - 40px);
            height: 150px;
            background: url(imgs/img_commentsuccess.png) no-repeat center;
            background-size: 50%;
            border-bottom: solid 1px #d8d8d8;
        }

        #page_comment #step2 img {
            width: 80%;
            padding: 30px 0;
        }
    </style>

    <div id="step1" ms-visible="step=='step1'">

        <!--<header>-->
        <!--<b class="f36">纹身大咖</b>-->
        <!--</header>-->
        <!--<div class="blank" style="height:45px;"></div>-->

        <div class="hImg"></div>

        <div class="wbox">

            <h1 class="f32 tip">您的好评是对我的肯定！</h1>
            <img class="avatar" ms-src="avatar">

            <h2 class="f32 tip">{{nickname}}</h2>

            <div class="starAr">
                <span class="f32">给商家评分:</span>

                <div class="star" ms-class-light="stars>=1" ms-click="star$click($event,1)"></div>
                <div class="star" ms-class-light="stars>=2" ms-click="star$click($event,2)"></div>
                <div class="star" ms-class-light="stars>=3" ms-click="star$click($event,3)"></div>
                <div class="star" ms-class-light="stars>=4" ms-click="star$click($event,4)"></div>
                <div class="star" ms-class-light="stars>=5" ms-click="star$click($event,5)"></div>
            </div>

            <textarea class="f36" placeholder="留下您宝贵的建议和意见" ms-duplex="textComment" maxlength="200">

            </textarea>

            <div class="f36 btn-normal" ms-click="putComment">发表评价</div>

        </div>

    </div>

    <div id="step2" ms-visible="step=='step2'">

        <header>
            <b class="f36">纹身大咖</b>
        </header>
        <div class="blank" style="height:45px;"></div>

        <div class="hImg"></div>

        <div style="width: 100%; text-align: center">
            <img src="./imgs/2Dcode.png"/>
        </div>

    </div>

</div>